<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单待办事项</title>
    <link rel="stylesheet" href="Todo List.css">
</head>
<body>
    <h1>待办事项</h1>
    <input type="text" id="todoInput" placeholder="输入任务...">
    <button onclick="addTodo()">添加</button>
    <div id="todoList"></div>

    <script>
        // 页面加载时读取本地存储的任务
        loadTodos();

        // 添加新任务
        function addTodo() {
            const input = document.getElementById('todoInput');
            const text = input.value.trim();
            
            if (text) {
                // 创建任务对象
                const todo = {
                    id: Date.now(),
                    text: text,
                    completed: false
                };
                
                // 添加到页面并保存
                renderTodo(todo);
                saveTodos();
                input.value = ''; // 清空输入框
            }
        }

        // 渲染单个任务到页面
        function renderTodo(todo) {
            const list = document.getElementById('todoList');
            
            // 创建任务元素
            const item = document.createElement('div');
            item.className = `todo-item ${todo.completed ? 'completed' : ''}`;
            item.dataset.id = todo.id;
            
            // 任务文本
            const textSpan = document.createElement('span');
            textSpan.textContent = todo.text;
            
            // 完成按钮
            const completeBtn = document.createElement('button');
            completeBtn.textContent = todo.completed ? '未完成' : '完成';
            completeBtn.onclick = () => {
                todo.completed = !todo.completed;
                item.classList.toggle('completed');
                completeBtn.textContent = todo.completed ? '未完成' : '完成';
                saveTodos();
            };
            
            // 删除按钮
            const deleteBtn = document.createElement('button');
            deleteBtn.textContent = '删除';
            deleteBtn.onclick = () => {
                item.remove();
                saveTodos();
            };
            
            // 组合元素
            item.appendChild(textSpan);
            item.appendChild(completeBtn);
            item.appendChild(deleteBtn);
            list.appendChild(item);
        }

        // 保存所有任务到localStorage
        function saveTodos() {
            const items = document.querySelectorAll('.todo-item');
            const todos = Array.from(items).map(item => ({
                id: Number(item.dataset.id),
                text: item.querySelector('span').textContent,
                completed: item.classList.contains('completed')
            }));
            
            localStorage.setItem('todos', JSON.stringify(todos));
        }

        // 从localStorage加载任务
        function loadTodos() {
            const todos = JSON.parse(localStorage.getItem('todos') || '[]');
            todos.forEach(todo => renderTodo(todo));
        }

        // 支持按Enter键添加任务
        document.getElementById('todoInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') addTodo();
        });
    </script>
</body>
</html>